﻿<script src="~/lib/vue/dist/vue.global.js"></script>
<script src="~/lib/axios/dist/axios.js"></script>
<link href="~/lib/element-plus/dist/index.css" rel="stylesheet" />
<script src="~/lib/element-plus/dist/index.full.js"></script>
<div id="app">
	<table width="100%">
		<tr>
			<td>
				<p color="black">
					您正在做的业务是：人力资源--招聘管理--职位发布管理--职位发布变更
				</p>
			</td>
		</tr>

	</table>
	当前可变更是职位发布总数：{{rows}}例
	<el-table ref="myref" :data="tableData" style="width: 100%" :header-cell-style="{background:'#FFDB6F',color:'#606266'}">
		<el-table-column prop="majorName" label="职位名称" width="180"></el-table-column>
		<el-table-column prop="secondKindName" label="公司名称" width="180"></el-table-column>
		<el-table-column prop="humanAmount" label="招聘人数" width="180"></el-table-column>
		<el-table-column prop="registTime" label="发布时间" width="180" :formatter="formatDate"></el-table-column>
		<el-table-column prop="deadline" label="截止时间" width="180" :formatter="formatDate1"></el-table-column>
		<el-table-column label="操作">
			<template #default="scope">
				<el-button size="small" v-on:click="handleEdit(scope.row)">修改</el-button>
				<el-button size="small"
						   type="danger"
						   v-on:click="handleDelete(scope.row.mreId)">删除</el-button>
			</template>
		</el-table-column>
	</el-table>
	<el-pagination v-model:current-page="currentPage"
				   v-model:page-size="pageSize"
				   :page-sizes="[2, 4, 6, 8]"
				   :small="small"
				   :disabled="disabled"
				   :background="background"
				   layout="total, sizes, prev, pager, next, jumper"
				   :total="rows"
				   v-on:size-change="handleSizeChange"
				   v-on:current-change="handleCurrentChange">
	</el-pagination>
	<el-dialog v-model="udialogVisible"
			   title="修改"
			   width="1200">
			<table width="100%" border="1" cellpadding=0 cellspacing=1
				   bordercolorlight=#848284 bordercolordark=#eeeeee
				   class="TABLE_STYLE1">
				<tr>
					<td class="TD_STYLE1" width="11%">
						I级机构
					</td>
					<td width="14%" class="TD_STYLE2">
						<el-input v-model="uform.yjjg" readonly class="aaa"></el-input>
					</td>
					<td width="11%" class="TD_STYLE1">
						II级机构
					</td>
					<td width="14%" class="TD_STYLE2">
						<el-input v-model="uform.ejjg" readonly class="aaa"></el-input>
					</td>
					<td width="11%" class="TD_STYLE1">
						III级机构
					</td>
					<td class="TD_STYLE2">
						<el-input v-model="uform.sjjg" readonly class="aaa"></el-input>
					</td>
					<td width="11%" class="TD_STYLE1">
						招聘类型
					</td>
					<td class="TD_STYLE2" colspan="2">
						<el-select v-model="uform.zplx" placeholder="--请选择--" class="aaa">
							<el-option v-for="item in options"
									   :key="item.value"
									   :label="item.label"
									   :value="item.label" />
						</el-select>

					</td>
				</tr>
				<tr>
					<td class="TD_STYLE1">
						职位分类
					</td>
					<td class="TD_STYLE2">
						<el-input v-model="uform.zwfl" readonly class="aaa"></el-input>
					</td>
					<td class="TD_STYLE1">
						职位名称
					</td>
					<td class="TD_STYLE2">
						<el-input v-model="uform.zwmc" readonly class="aaa"></el-input>
					</td>
					<td class="TD_STYLE1">
						招聘人数
					</td>
					<td class="TD_STYLE2">
						<el-input v-model="uform.zprs" class="aaa"></el-input>
					</td>
					<td class="TD_STYLE1">
						截止日期
					</td>
					<td class="TD_STYLE2">
						<el-date-picker v-model="uform.jzrq"
										type="date"
										placeholder="选择日期">
						</el-date-picker>
					</td>
				</tr>
				<tr>
					<td class="TD_STYLE1">
						变更人
					</td>
					<td class="TD_STYLE2">
						<el-input v-model="uform.bgr" class="aaa"></el-input>
					</td>
					<td class="TD_STYLE1">
						变更时间
					</td>
					<td class="TD_STYLE2">
						<el-input v-model="uform.bgsj" class="aaa"></el-input>
					</td>

					<td>&nbsp; </td>
					<td>&nbsp; </td>
					<td>&nbsp; </td>
					<td>&nbsp; </td>

				</tr>
				<tr>
					<td class="TD_STYLE1">
						职位描述
					</td>
					<td class="TD_STYLE2" colspan="8">
						<textarea v-model="uform.zwms" name="emajorRelease.majorDescribe" rows="4" cols="80" class="TEXTAREA_STYLE1"></textarea>
					</td>

				</tr>
				<tr>
					<td class="TD_STYLE1">
						招聘要求
					</td>
					<td class="TD_STYLE2" colspan="8">
						<textarea v-model="uform.zpyq" name="emajorRelease.engageRequired" rows="4" cols="80" class="TEXTAREA_STYLE1"></textarea>
					</td>

				</tr>
				<el-button v-on:click="qk()">Cancel</el-button>
				<el-button type="primary" v-on:click="update()">
					修改
				</el-button>
			</table>
	</el-dialog>
</div>
<script type="text/javascript">
	var { createApp, reactive, ref, computed, watchEffect } = Vue
	var app = createApp({
		setup() {
			//分页查询
			var currentPage = ref(1);
			var pageSize = ref(2);
			var rows = ref(1);
			const small = ref(false)
			const background = ref(false)
			const disabled = ref(false)
			var tableData = ref([]);
			function sx() {
				axios.defaults.headers["Content-Type"] = "application/x-www-form-urlencoded";
				axios.post('/GetChances', {
					page: currentPage.value,
					pageSize: pageSize.value
				}).then(function (response) {
					tableData.value = response.data.chances.result;
					rows.value = response.data.totalRecords.result
						;
				})
			}
			sx();
			function handleSizeChange(size) {
				pageSize.value = size;
				sx();
			}
			function handleCurrentChange(cpage) {
				currentPage.value = cpage;
				sx();
			}
			// function fill() {
			// 	axios.post('/EMR/GetEMR')
			// 		.then(function (response) {
			// 			console.log(response.data);
			// 			tableData.value = response.data;
			// 		})
			// }
			// fill();
			//删除
			function handleDelete(id) {
				if (confirm("确认删除吗")) {
					axios.defaults.headers["Content-Type"] = "application/x-www-form-urlencoded";
					axios.post('/DeleteEMR', {
						Id: id
					}).then(res => {
						//console.log(res);
						if (res.data > 0) {
							sx();
							alert("删除成功");
						}
					}).catch(err => {
						console.log(err);
					})
				}

			}
			//修改
			var udialogVisible = ref(false)
			const uform = reactive({
				Id: "",
				yjjg: "",
				ejjg: "",
				sjjg: "",
				zwfl: "",
				zwmc: "",
				zprs: "",
				jzrq: "",
				bgr: "",
				bgsj: "",
				zwms: "",
				zpyq: "",
				zplx: ""
			})
			const uName = computed(() => {
				return sessionStorage.getItem('u');
				// return localStorage.getItem('u')
			})
			//获取当前时间
			uform.bgsj = ref(new Date().toLocaleString());

			// 如果你想要实时更新时间，可以使用watchEffect或setInterval
			watchEffect(() => {
				const interval = setInterval(() => {
					uform.bgsj = new Date().toLocaleString();
				}, 1000);
			});
			function handleEdit(row) {
				udialogVisible.value = true;
				uform.Id = row.mreId;
				uform.yjjg = row.firstKindName;
				uform.ejjg = row.secondKindName;
				uform.sjjg = row.thirdKindName;
				uform.zplx = row.engageType;
				// uform.zwfl = "row.MajorKindName";
				uform.zwmc = row.majorName;
				uform.zprs = row.humanAmount;
				uform.jzrq = row.deadline;
				uform.bgr = uName;
				uform.zwms = row.majorDescribe;
				uform.zpyq = row.engageRequired;
				axios.defaults.headers["Content-Type"] = "application/x-www-form-urlencoded";
				axios.post('/GetCMSById', {
					id: row.majorId
				}).then(response => {
					uform.zwfl = response.data.majorKindName;
					
				}).catch(error => {
					console.error('Error fetching data:', error);
				});
			}
			function update() {
				axios.defaults.headers["Content-Type"] = "application/x-www-form-urlencoded";
				axios.post('/UpdateEMR', {
					MreId: uform.Id,
					HumanAmount: uform.zprs,
					Deadline: uform.jzrq,
					Changer: uform.bgr,
					ChangeTime: uform.bgsj,
					MajorDescribe: uform.zwms,
					EngageRequired: uform.zpyq,
					EngageType:uform.zplx

				}).then(res => {
					//console.log(res);
					if (res.data > 0) {
						sx();
						udialogVisible.value = false;
						alert("修改成功");
						qk();
					}
				}).catch(err => {
					console.log(err);
				})
			}
			function qk() {
				uform.zprs = "";
				uform.jzrq = "";
				uform.bgr = "";
				uform.bgsj = "";
				uform.zpyq = "";
				uform.zwms = ""
			}
			// 格式化日期
       		const formatDate = (row) => {
           		if (row) {
               		const date = new Date(row.registTime);
               		return `${date.getFullYear()}年${(date.getMonth() + 1).toString().padStart(2, '0')}月${date.getDate().toString().padStart(2, '0')}日`;
           		}
           		return '';
       		};
			const formatDate1 = (row) => {
           		if (row) {
               		const date = new Date(row.deadline);
               		return `${date.getFullYear()}年${(date.getMonth() + 1).toString().padStart(2, '0')}月${date.getDate().toString().padStart(2, '0')}日`;
           		}
           		return '';
       		};
			return {
				small,
				background,
				disabled,
				currentPage,
				pageSize,
				rows,
				handleSizeChange,
				handleCurrentChange,
				tableData,
				handleDelete,
				udialogVisible,
				handleEdit,
				uform,
				update,
				qk,
				formatDate,
				formatDate1,
				//下拉列表给的死值
				options: [{
					value: '选项1',
					label: '校园招聘'
				}, {
					value: '选项2',
					label: '社会招聘'
				}],
			}
		}
	})
	app.use(ElementPlus)
	app.mount("#app")
</script>
<style>
	/* CSS Document */
	* {
		FONT-FAMILY: 微软雅黑;
	}

	.resizeDivClass {
		position: relative;
		background-color: #DEDBD6;
		z-index: 1;
		left: expression(this.parentElement.offsetWidth-1);
		cursor: e-resize;
	}

	A:visited {
		TEXT-DECORATION: none
	}

	A:active {
		TEXT-DECORATION: none
	}

	A:hover {
		TEXT-DECORATION: underline overline
	}

	A:link {
		TEXT-DECORATION: none
	}

	.t {
		LINE-HEIGHT: 1.4
	}

	BODY {
		background-color: #FFFFBB;
		border: 1px solid #FFDB6F;
		display: block;
		margin: 8px;
	}
	BR {
		FONT-FAMILY: ����;
		FONT-SIZE: 9pt
	}

	TEXTAREA {
		BACKGROUND-COLOR: #FFFFCC;
		BORDER-BOTTOM-COLOR: #000000;
		BORDER-BOTTOM-WIDTH: 1px;
		BORDER-LEFT-COLOR: #000000;
		BORDER-LEFT-WIDTH: 1px;
		BORDER-RIGHT-COLOR: #000000;
		BORDER-RIGHT-WIDTH: 1px;
		BORDER-TOP-COLOR: #000000;
		BORDER-TOP-WIDTH: 1px;
		FONT-FAMILY: ����;
		FONT-SIZE: 9pt
	}

	SELECT {
		BACKGROUND-COLOR: #FFFFCC;
		BORDER-BOTTOM-COLOR: #000000;
		BORDER-BOTTOM-WIDTH: 1px;
		BORDER-LEFT-COLOR: #000000;
		BORDER-LEFT-WIDTH: 1px;
		BORDER-RIGHT-COLOR: #000000;
		BORDER-RIGHT-WIDTH: 1px;
		BORDER-TOP-COLOR: #000000;
		BORDER-TOP-WIDTH: 1px;
		FONT-FAMILY: ����;
		FONT-SIZE: 9pt
	}

	.gray {
		CURSOR: pointer;
	}

	.style3 {
		font-size: 16px;
		font-weight: bold;
	}

	.TABLE_STYLE1 {
		border: 1px solid;
		border-color: #000000;
		border-collapse: collapse;
		width: 100%;
	}

	.TABLE_STYLE2 {
		width: 100%;
	}

	.ALL-STYLE {
		border: 1px ridge #666666;
		border-color: #DEDBD6;
	}

	.TR_STYLE1 {
	}

	.style8 {
		color: #000066
	}



	.TD_HANDBOOK_STYLE1 {
		vertical-align: top;
		width: 100%;
		color: #0000FF;
	}

	.TD_STYLE1 {
		background-color: #FFDB6F;
	}

	.TD_STYLE2 {
		border-spacing: 1px;
		background-color: #FFFFBB;
		border-color: #DEDBD6;
		border: 0;
	}

	.TD_STYLE3 {
	}

	

	.SELECT_STYLE1 {
		width: 100%;
	}

	.SELECT_STYLE2 {
		width: 30%;
	}

	.TEXTAREA_STYLE1 {
		width: 100%;
	}

	.DIV_STYLE1 {
		float: right;
		vertical-align: top;
	}

	.DIV_STYLE2 {
		vertical-align: top;
	}

	.INPUT_STYLE1 {
		BACKGROUND-COLOR: #FFFFCC;
		width: 30%
	}

	.INPUT_STYLE2 {
		BACKGROUND-COLOR: #FFFFCC;
		width: 100%
	}

	

	.custom-select .el-input__inner {
		background-color: transparent;
		border: 1px solid #ccc; /* 或者其他你想要的边框颜色 */
	}
</style>
<style>
	body {
		font-family: Verdana, Tahoma, Arial, Helvetica, sans-serif;
		font-size: .8em;
	}

	/* the div that holds the date picker calendar */
	.dpDiv {
	}


	/* the table (within the div) that holds the date picker calendar */
	.dpTable {
		font-family: Tahoma, Arial, Helvetica, sans-serif;
		font-size: 12px;
		text-align: center;
		color: #505050;
		background-color: #ece9d8;
		border: 1px solid #AAAAAA;
	}


	/* a table row that holds date numbers (either blank or 1-31) */
	.dpTR {
	}


	/* the top table row that holds the month, year, and forward/backward buttons */
	.dpTitleTR {
	}


	/* the second table row, that holds the names of days of the week (Mo, Tu, We, etc.) */
	.dpDayTR {
	}


	/* the bottom table row, that has the "This Month" and "Close" buttons */
	.dpTodayButtonTR {
	}


	/* a table cell that holds a date number (either blank or 1-31) */
	.dpTD {
		border: 1px solid #ece9d8;
	}


	/* a table cell that holds a highlighted day (usually either today's date or the current date field value) */
	.dpDayHighlightTD {
		background-color: #CCCCCC;
		border: 1px solid #AAAAAA;
	}


	/* the date number table cell that the mouse pointer is currently over (you can use contrasting colors to make it apparent which cell is being hovered over) */
	.dpTDHover {
		background-color: #aca998;
		border: 1px solid #888888;
		cursor: pointer;
		color: red;
	}


	/* the table cell that holds the name of the month and the year */
	.dpTitleTD {
	}


	/* a table cell that holds one of the forward/backward buttons */
	.dpButtonTD {
	}


	/* the table cell that holds the "This Month" or "Close" button at the bottom */
	.dpTodayButtonTD {
	}


	/* a table cell that holds the names of days of the week (Mo, Tu, We, etc.) */
	.dpDayTD {
		background-color: #CCCCCC;
		border: 1px solid #AAAAAA;
		color: white;
	}


	/* additional style information for the text that indicates the month and year */
	.dpTitleText {
		font-size: 12px;
		color: gray;
		font-weight: bold;
	}


	/* additional style information for the cell that holds a highlighted day (usually either today's date or the current date field value) */
	.dpDayHighlight {
		font-weight: bold;
	}


	/* the forward/backward buttons at the top */
	.dpButton {
		font-family: Verdana, Tahoma, Arial, Helvetica, sans-serif;
		font-size: 10px;
		color: gray;
		background: #d8e8ff;
		font-weight: bold;
		padding: 0px;
	}


	/* the "This Month" and "Close" buttons at the bottom */
	.dpTodayButton {
		font-family: Verdana, Tahoma, Arial, Helvetica, sans-serif;
		font-size: 10px;
		color: gray;
		background: #d8e8ff;
		font-weight: bold;
	}
</style>
<style>
	.a{
		background-color: #FFFFCC;
		border: none;
	}
</style>


